<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>利用JQuery去动态修改样式</title>
		<script src="../../js/jquery.min.js"></script>

	</head>
	<body>
		<div id="msg">使用JQuery来实现div中的字体变大、变色</div>

		<button id="pay">支付宝支付</button>
		
		<div style="margin:10px;">
		<!-- 页面可以有很多相同，怎么知道是那一组呢？--id相同 -->
		<input type="checkbox" id="ck" checked="checked"/>红色
		<input type="checkbox" id="ck"/>绿色
		<input type="checkbox" id="ck"/>蓝色
		
		<button id="selectAll">全选</button>
		<button id="unselectAll">不全选</button>
		
		</div>
	</body>
	<script>
		//JQuery的ready事件
		$().ready(function() {
			//获取div对象,设置css样式,改变字体大小
			$("#msg").css("font-size", 18); //样式：font-size：36
			$("#msg").css("color", "red"); //样式：color：pink

			//给按钮动态绑定一个事件onclick
			//onclick 没有on 参数是匿名函数
			$("#pay").click(function() {
				//禁止按钮：html属性：disabled true禁止，false可以点击
				$("#pay").prop("disabled", true); //属性方法	
			});
			//实现全选，JQuery选择器[],过滤出想要的元素，[id标签的id=ck（id给定的名称）]
			//JQuery可以针对一组值进行设定，动态绑定click事件
			$("#selectAll").click(function(){
			$("[id=ck]").prop("checked",true);//所有ck框都全部选中
			});
			$("#unselectAll").click(function(){
			$("[id=ck]").prop("checked",false);//所有ck框全部选中取消
			});
		});
	</script>
</html>
